<template>
  <el-dialog title="提现" :close-on-click-modal="false" :visible.sync="visible" width="40%">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="120px">
      <el-form-item label="输入提现余额" prop="money">
        <el-input maxlength="10" v-model="dataForm.money" @input="limitInput($event,'money')"></el-input>
      </el-form-item>
      <el-form-item label="提现方式" prop="payment_term">
        <el-select v-model="dataForm.payment_term" @change="selectPayStates" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="银行卡名称" prop="bank_name" v-if="dataForm.payment_term==2">
        <!-- <el-input v-model="dataForm.bank_name" maxlength="20"></el-input> -->
        <el-select v-model="dataForm.withdraw_account" placeholder="请选择" @change="selectBankVal">
          <el-option v-for="item in bankList" :key="item.id" :label="item.bank_name" :value="item.card_num">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="提现账号" prop="withdraw_account">
        <el-input v-model="dataForm.withdraw_account" maxlength="50" :disabled="dataForm.payment_term==2?true:false"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="payee">
        <el-input v-model="dataForm.payee" maxlength="8" :disabled="dataForm.payment_term==2?true:false"></el-input>
      </el-form-item>
      <el-form-item label="手机号码" prop="withdraw_mobile">
        <el-input v-model="dataForm.withdraw_mobile" :disabled="dataForm.payment_term==2?true:false" maxlength="11" show-word-limit></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { treeDataTranslate } from '@/utils'
import seviceApi from '@/api/serviceApi.js'
import {
  isEmail,
  isMobile
} from '@/utils/validate'
export default {
  data () {
    var validateMobile = (rule, value, callback) => {
      if (!isMobile(value)) {
        callback(new Error('手机号格式错误'))
      } else {
        callback()
      }
    }
    return {
      visible: false,
      bankList: [],
      dataForm: {
        money: '',
        payment_term: '',
        payee: '',
        withdraw_account: '',
        withdraw_mobile: '',
        bank_name: ''
      },
      options: [
        {
          label: '微信',
          value: 0
        }, {
          label: '支付宝',
          value: 1
        }, {
          label: '银行卡',
          value: 2
        }, {
          label: '现金支付',
          value: 3
        }
      ],
      dataRule: {
        money: [{
          required: true,
          message: '提现余额不能为空',
          trigger: 'blur'
        }],
        payment_term: [{
          required: true,
          message: '请选择提现方式',
          trigger: 'blur'
        }],
        bank_name: [{
          required: true,
          message: '银行卡名称不能为空',
          trigger: 'blur'
        }],
        withdraw_account: [{
          required: true,
          message: '提现账号不能为空',
          trigger: 'blur'
        }],
        payee: [{
          required: true,
          message: '姓名不能为空',
          trigger: 'blur'
        }],

        withdraw_mobile: [{
          required: true,
          message: '手机号码不能为空',
          trigger: 'blur'
        },
        {
          validator: validateMobile,
          trigger: 'blur'
        }]
      }
    }
  },

  methods: {
    selectBankVal (e) {
      this.bankList.forEach(element => {
        if (element.card_num == e) {
          this.dataForm.bank_name = element.bank_name
          this.dataForm.withdraw_mobile = element.mobile
          this.dataForm.payee = element.name
        }
      })
    },
    selectPayStates (e) {
      if (e == 2) {
        seviceApi.bankListApi().then(res => {
          if (res && res.data.code == 200) {
            if (res.data.list.length > 0) {
              this.bankList = res.data.list
            }
          }
        })
      }
    },
    init (id) {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
      })
    },
    limitInput (value, name) {
      this.dataForm[name] =
        ('' + value) // 第一步：转成字符串
          .replace(/[^\d^\.]+/g, '') // 第二步：把不是数字，不是小数点的过滤掉
          .replace(/^0+(\d)/, '$1') // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
          .replace(/^\./, '0.') // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
          .match(/^\d*(\.?\d{0,2})/g)[0] || '' // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，而且小数点后面只能有0到2位小数
    },
    // 提交
    dataFormSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          seviceApi.postShopWithdraw(this.dataForm).then(res => {
            if (res && res.data.code == 200) {
              this.$message({
                message: '提交成功',
                type: 'success'
              })
              this.visible = false
              this.$emit('updataList', 1)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
</style>
